<template>
	<view>
		<zy-search :is-focus="false" :theme="themeClass" :show-want="true" :speechEngine="speechEngine"
			:hot-list="hotList" @getSearchText="getSearchText"></zy-search>

		<view class="all">
			<view class="box">
				<view class="littleBox" v-for="(item,index) in dataResultList" :key="index" v-if="item.type == 1"
					@click="toTypeDetail(item.title)">
					<image :src="item.imgUrl"></image>
					<view>{{item.title}}</view>
				</view>
			</view>
			<!-- 服务项目 -->
			<view class="serve">
				<view class="title" v-if="show">服务项目</view>
				<view class="one" v-for="(item,index) in dataResultList" :key="index" v-if="item.type == 3"
					@click="toServiceDetail(item.id)">
					<image class="img" :src="item.imgUrl"></image>
					<view class="right">
						<text class="name">{{item.title}}</text>
						<text class="zx">{{item.other}}人咨询</text>
					</view>
				</view>
			</view>
			<!-- hang业动态 -->
			<view class="serve">
				<view class="title" v-if="show">行业动态</view>
				<view class="two" v-for="(item,index) in dataResultList" :key="index" v-if="item.type == 2"
					@click="toIndustryDetail(item.id)">
					<image class="img" :src="item.imgUrl"></image>
					<view class="right_se">
						<text class="top">{{item.title}}</text>
						<text class="down">{{item.other}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import zySearch from '../../components/zy-search/zy-search.vue'
	export default {
		components: {
			zySearch
		},
		data() {
			return {
				themeClass: 'block',
				speechEngine: 'baidu', //语音识别引擎
				hotList: ['栏目1', '栏目2', '栏目3', '栏目4'], //初始化推荐列表
				dataResultList: [], //搜索结果
				show: false
			}
		},
		methods: {
			//跳转服务详情
			toServiceDetail(id) {
				uni.request({
					url: this.$serverUrl + 'ftService/getPutShelfServicesByType',
					method: 'POST',
					data: {
						"pageNo": 1,
						"pageSize": 10,
						"browseNumber": null,
						"advisoryNumber": null,
						"serviceId": id
					},
					success: (res) => {
						uni.navigateTo({
							url: '/pages/serve/serviceDetail?op=' + encodeURIComponent(JSON.stringify(
								res.data[0]))
						})
					}
				})
			},
			//跳转行业详情
			toIndustryDetail(id) {
				uni.request({
					url: this.$serverUrl + 'ftIndustryDetails/getById',
					data: {
						"id": id
					},
					success: (res) => {
						uni.navigateTo({
							url: '/pages/home/detail?op=' + encodeURIComponent(JSON.stringify(res
								.data))
						})
					}
				})
			},
			//跳转分类详情
			toTypeDetail(typeName) {
				uni.navigateTo({
					url: '/pages/home/typeDetail?type=' + typeName
				})
			},
			getSearchText(e) {
				uni.request({
					url: this.$serverUrl + 'ftIndex/search',
					method: 'POST',
					data: {
						"keyWords": e,
						"serviceCity": getApp().globalData.city
					},
					success: (res) => {
						if (res.data.success) {
							this.show = true
							this.dataResultList = res.data.searchList
						} else {
							uni.showToast({
								title: '搜索结果出错',
								icon: 'none'
							})
						}
					}
				})
			},
			onBackPress(event) {
				uni.navigateTo({
					url: 'home'
				});
				return true;
			}
		},
	}
</script>

<style>
	/* 宫格 */
	.all {
		margin: 40upx 44upx;
	}

	.box {

		display: flex;
		flex-wrap: wrap;
		align-items: center;
		/* justify-content: center; */
	}

	.littleBox {

		width: 106upx;
		font-size: 26upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* margin: 20upx 30upx; */
		padding: 20rpx;
	}

	.littleBox image {
		width: 88upx;
		height: 88upx;
	}

	.serve {
		margin-top: 80upx;
	}

	.title {
		color: #666666;
		font-size: 28upx;
	}

	.img {
		width: 176upx;
		height: 176upx;
		border-radius: 10upx;
		background-color: #00B2CA;
	}

	.one {
		display: flex;
		margin-top: 36upx;
	}

	.two {
		display: flex;
		margin-top: 36upx;
		/* height: 176upx; */
	}

	.right {
		margin-left: 36upx;
		display: flex;
		flex-direction: column;
	}

	.right_se {
		margin-left: 36upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.name {
		color: #333333;
		font-weight: 600;
	}

	.zx {
		font-size: 24upx;
		color: #999999;
		margin-top: 26upx;
	}

	/*  */
	.top {
		color: #333333;
	}

	.down {
		color: #999999;
		font-size: 20upx;
	}

	.wenzi {
		margin-top: 52upx;
	}

	.time {
		margin-top: 26upx;
		font-size: 20upx;
		color: #999999;
	}
</style>
